<template>
  <div class="simple-test">
    <h2>简单API测试</h2>
    
    <el-button @click="testApi" :loading="loading" type="primary">
      测试批次API
    </el-button>
    
    <div v-if="result" class="result">
      <h3>API响应结果：</h3>
      <pre>{{ JSON.stringify(result, null, 2) }}</pre>
    </div>
    
    <div v-if="error" class="error">
      <h3>错误信息：</h3>
      <pre>{{ error }}</pre>
    </div>
    
    <div v-if="tableData.length > 0" class="table-result">
      <h3>表格数据：</h3>
      <el-table :data="tableData" border>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="goodsCode" label="货品编号" width="120" />
        <el-table-column prop="goodsName" label="货品名称" width="150" />
        <el-table-column prop="goodsType" label="货品类型" width="120" />
        <el-table-column prop="unit" label="单位" width="80" />
        <el-table-column prop="warehouseName" label="仓库名称" width="120" />
        <el-table-column prop="currentStock" label="当前库存" width="100" />
        <el-table-column prop="batch" label="批次" width="100" />
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getBatchPage } from '/@/api/batch/batch'

const loading = ref(false)
const result = ref<any>(null)
const error = ref<string>('')
const tableData = ref<any[]>([])

const testApi = async () => {
  loading.value = true
  error.value = ''
  result.value = null
  tableData.value = []
  
  try {
    console.log('开始API调用...')
    const response = await getBatchPage({
      page: 1,
      pageSize: 5
    })
    
    console.log('API响应:', response)
    console.log('响应类型:', typeof response)
    console.log('响应键:', Object.keys(response || {}))
    
    result.value = response
    
    // 尝试提取数据
    let data = null
    if (response && response.data) {
      data = response.data
    } else if (response && response.items) {
      data = response
    } else if (Array.isArray(response)) {
      data = { items: response, total: response.length }
    } else {
      data = response
    }
    
    console.log('提取的数据:', data)
    
    if (data && data.items && Array.isArray(data.items)) {
      tableData.value = data.items
      console.log('设置表格数据成功:', tableData.value.length)
    } else if (Array.isArray(data)) {
      tableData.value = data
      console.log('设置数组数据成功:', tableData.value.length)
    } else {
      console.warn('无法提取有效数据')
    }
    
    ElMessage.success('API调用成功')
  } catch (err: any) {
    console.error('API调用失败:', err)
    error.value = err.message || '未知错误'
    ElMessage.error('API调用失败')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.simple-test {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.result, .error, .table-result {
  margin-top: 20px;
  padding: 15px;
  border-radius: 4px;
}

.result {
  background-color: #f0f9ff;
  border: 1px solid #0ea5e9;
}

.error {
  background-color: #fef2f2;
  border: 1px solid #ef4444;
}

.table-result {
  background-color: #f9fafb;
  border: 1px solid #d1d5db;
}

pre {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 400px;
  font-size: 12px;
}

h2, h3 {
  color: #333;
  margin-bottom: 10px;
}
</style>



